<script setup>
import jinpin from "../assets/jin-pin.png";
import server from "../assets/server.png";
import buJu from "../assets/buzhu.png";
import videoIcon from "../assets/video-icon.svg";
import biBook from "../assets/bi-book.svg";
import deng from "../assets/deng.png";
import { MailOpenOutline, PaperPlaneOutline, People, PhonePortraitOutline, CalculatorOutline } from "@vicons/ionicons5";
import { ref, onMounted } from "vue";
import { postRequest, getRequest } from '@/api';
import Modal from "../common/Modal.vue"
import dingdang from "../assets/dingdang.png"
import jisuanji from "../assets/jisuanji.png"
import arrow from "../assets/class-arrow.png"
import weChat from "../assets/wechat.png"
import phone from "../assets/phone.png"
import avata from "../assets/useravatar.png"
import youjian from "../assets/youjian.png"
import uqur from "../assets/uqur.png"


const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'

const selectedIndex = ref(0);
const pages = ref(0)

const name = ref('');
const property = ref('');
const bathroom = ref('');
const bedroom = ref('');
const livingRoom = ref('');
const area = ref('');
const phoneNumber = ref('');

const opsition = ref('');
const modelPhoneNumber = ref('');
const position = ref('');

const controls = ref(false);
const videoIcons = ref(true)
const videoPlayer = ref(null);
const indexArry = ref({});
const classroomData = ref({})
const companys = ref({});
const schemeData = ref({})
const caseData = ref({})
const isModalVisible = ref(false);
const pagetwoItems = ref({});
const caseShowItemBanner = ref({});

onMounted(() => {
  constkuRequest();
  window.scrollTo(0, 0);
})

const constkuRequest = () => {
  getRequest('/index').then(res => {
    console.log('/index', res);
    indexArry.value = res;
    const { classroom } = res;
    classroomData.value = classroom;
    const { company } = res;
    companys.value = company;
    schemeData.value = res.scheme;
    caseData.value = res.case
  })
}


const anyItem = [
  { number: '6', title: '年', text: '历史完成' },
  { number: '30', title: '位', text: '资深设计师' },
  { number: '350', title: '+', text: '业主选择我们的' },
  { number: '80', title: '%', text: '转介绍率' }
]


const selectItem = (item, index) => {
  console.log('item', item, 'index', index);
  selectedIndex.value = index;
  const ids = item.id;
  getRequest('/scheme_index', { id: ids }).then(res => {
    caseData.value = res;
    console.log('/scheme_index', res);
  })
};


const videoPlayClick = () => {
  videoIcons.value = false;
  controls.value = true;
  videoPlayer.value.play();
};


const caseDataClick = (slide) => {
  console.log('item', slide, '00000000');
  const ids = slide.id
  if (slide.case_is_essay === 20) {
    pages.value = 1;
    window.scrollTo(0, 0);
    postRequest('/case_show', { id: ids }).then(res => {
      console.log('/case_show', res);
      pagetwoItems.value = res;
      // const caseTopImages = JSON.parse(res.case_top_images);
      caseShowItemBanner.value = res.case_top_images;
    })
  } else if (slide.case_is_essay === 10) {
    window.open(slide.case_url)
  }

}

const subPhoneClick = () => {
  const phoneNumber = document.getElementById('phoneNumber').value.trim();
  // 正则表达式验证手机号格式，支持常见的手机号格式
  const phoneRegex = /^1[3456789]\d{9}$/;

  if (phoneNumber && phoneRegex.test(phoneNumber)) {
    // 手机号格式正确，继续执行后续操作
    postRequest('/consultant_index', {
      measure_call: name.value,
      measure_toponym: property.value,
      measure_defend: bathroom.value,
      measure_chamber: bedroom.value,
      measure_office: livingRoom.value,
      measure_square: area.value,
      measure_tel: phoneNumber
    }).then(res => {
      console.log('subPhoneClick', res);
      if (res.code === 200) {
        alert('成功');
      }
    }).catch(err => {
      console.error('subPhoneClick error', err);
    });
  } else {
    // 手机号格式不正确的处理逻辑
    console.log('手机号格式不正确');
    // 或者给用户一个提示
    alert('请输入正确的手机号');
  }
}


const options = [
  {
    label: "天山区",
    value: '天山区',
  },
  {
    label: '沙依巴克区',
    value: '沙依巴克区'
  },
  {
    label: '新市区',
    value: '新市区'
  },
  {
    label: "水磨沟区",
    value: '水磨沟区',
  },
  {
    label: '头屯河区',
    value: '头屯河区'
  },
  {
    label: '达坂城区',
    value: '达坂城区'
  },
  {
    label: '米东区',
    value: '米东区'
  },
  {
    label: '乌鲁木齐县',
    value: '乌鲁木齐县',
  },
];

const handlePositionChange = (e) => {
  const selectedValue = e.target.value;
  position.value = selectedValue
}

const modeSubClick = () => {
  const phoneNumber = document.getElementById('modelPhoneNumber').value.trim(); // 使用一个新的变量名，避免冲突
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (phoneNumber && phoneRegex.test(phoneNumber)) {
    postRequest('/quote_message', {
      quote_area: position.value,
      quote_tel: phoneNumber // 直接使用新的变量名 phoneNumber
    }).then(res => {
      if (res.code === 200) {
        alert('成功');
        isModalVisible.value = false;
      }
    });
  } else {
    alert('请输入正确的手机号');
  }
};


</script>

<template>
  <div class="content" v-if="pages === 0">
    <div class="img">
      <n-carousel :autoplay="true" :interval="2000" :transition-props="{ name: 'creative' }" effect="custom" show-arrow
        style="width: 100%; height: 43.75rem">
        <template v-for="(item, index) in indexArry.banner" :key="index">
          <div><img :src="imgDefultUrl + item.swiper_avatar" class="carousel-img">
            <div class="carousel-text">
              <div style="font-weight: 4rem;font-size: 4rem;">{{ item.swiper_company }}</div>
              <div style="font-weight: 900;font-size: 9rem;color: rgba(241, 137, 27, 1);">{{ item.swiper_title }}</div>
              <div style="font-size: 1.25rem;font-weight: 400">{{ item.swiper_describe }}</div>
            </div>

          </div>
        </template>
      </n-carousel>
    </div>
    <div class="analyze">
      <div class="ana-data-box">
        <div v-for="item in anyItem" :key="item">
          <div style="font-size: 2.5rem;font-weight: bold;">{{ item.number }}<span
              style="font-size: 1.25rem;font-weight: 600;">{{
                item.title
              }}</span></div>
          <div style="color: rgba(128, 128, 128, 1);font-size: 1.25rem;font-weight: bold;">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <div class="add-box">
      <div class="add">
        <div class="ad-icon">
          <img :src="dingdang">
        </div>
        <div class="scroll-text-container">
          <template v-for="(add, ad) in indexArry.notice" :key="ad">
            <div style="color: rgba(119, 119, 119, 1)">{{ add.notice_content }}</div>
          </template>
        </div>

      </div>
    </div>
    <div class="budget-box">
      <div class="budget">
        <div class="budget-img">
          <img :src="imgDefultUrl + companys.company_home_top_image">
        </div>
        <div class="form-box">
          <div class="form-box-item">
            <div class="form-item-top">
              <div style="display: flex;justify-content: center;">
                <img style="width: 3.125rem;" :src="jisuanji">
                <div
                  style="color: rgba(51, 51, 51, 1);width: 8.125rem;height: 3.8125rem;font-size: 1.625rem;margin-left: 2.125rem">
                  我家装修要花多少钱
                </div>
              </div>
              <div style="display: flex;justify-content: center;">
                <img style="width: 4.375rem;height: 4.5rem" :src="biBook">
                <div
                  style="color: rgba(51, 51, 51, 1);width: 8.125rem;height: 3.8125rem;font-size: 1.625rem;margin-left: 2.125rem">
                  预约免费上门量房服务
                </div>
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <div class="input-box">
                <div style="margin: .5rem">你的称呼</div>
                <input v-model="name" class="inputs" placeholder="" style="width: 14.4375rem;" type="text" />
              </div>
              <div class="input-box">
                <div style="margin: .5rem">楼盘/底盘</div>
                <input v-model="property" class="inputs" placeholder="" style="width: 10.8125rem;" type="text" />
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <div class="input-box">
                <input v-model="bathroom" class="inputs" placeholder="" style="width: 8.0625rem;" type="text" />
                <div style="margin: .5rem">卫</div>
              </div>
              <div class="input-box">
                <input v-model="bedroom" class="inputs" placeholder="" style="width: 10.1875rem;" type="text" />
                <div style="margin: .5rem">室</div>
              </div>
              <div class="input-box">
                <input v-model="livingRoom" class="inputs" placeholder="" style="width: 10.8125rem;" type="text" />
                <div style="margin: .5rem">厅</div>
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <div class="input-box">
                <input v-model="area" class="inputs" placeholder="" style="width: 8.0625rem;" type="text" />
                <div style="margin: .5rem">m²</div>
              </div>
              <div class="input-box">
                <input v-model="phoneNumber" id="phoneNumber" class="inputs" placeholder="" style="width: 20.75rem;"
                  type="text" />
                <div style="margin: .5rem">手机号码</div>
              </div>
            </div>
            <div class="btn-box">
              <button class="button" @click="subPhoneClick">
                <div style="margin: .625rem">测量结果联系客服</div>
                <img style="width: 3.125rem;height: .75rem" :src="arrow">
              </button>
            </div>
          </div>
          <div class="form-box-right"></div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 13.3125rem;margin-left:8.9375rem;width: 12.125rem;height: .1875rem;background: rgba(241, 137, 27, 1)">
    </div>
    <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
      <div
        style="width: 88.125rem; height: 9.5625rem; font-size: 1.625rem;color: #777777;font-weight: 300;line-height: 3.1875rem;letter-spacing: .125rem;"
        v-html="companys.company_advantage">
      </div>
    </div>
    <div class="jin-pin-box">
      <img :src="jinpin">
      <p>精选案例</p>
      <div></div>
    </div>

    <div class="pick-it-up-box">
      <div v-for="(item, index) in schemeData" :key="index" :class="['items', { 'selected': selectedIndex === index }]"
        class="items" @click="selectItem(item, index)">
        <img :alt="item.scheme_name"
          :src="selectedIndex === index ? imgDefultUrl + item.scheme_icon_active : imgDefultUrl + item.scheme_icon">
        <p :style="{ color: selectedIndex === index ? 'rgba(241, 137, 27, 1)' : 'black' }">{{ item.scheme_name }}</p>
      </div>
    </div>


    <div class="pick-swiper-box">

      <div class="swiper-box">
        <n-carousel :slides-per-view="3" :space-between="20" :loop="false" draggable>
          <div v-for="(slide, index) in caseData" :key="index" class="carousel-slide" @click="caseDataClick(slide)">
            <img class="carousel-img" :src="imgDefultUrl + slide.case_avatar" alt="Slide Image">
            <div class="carousel-text">
              <div style="font-size: 2.625rem;font-weight: 500;">{{ slide.case_title }}</div>
              <div style="font-size: 1.375rem;color: rgba(241, 137, 27, 1);font-weight: 300;">{{ slide.scheme_name }}
              </div>
            </div>
          </div>

        </n-carousel>
      </div>

      <div class="gengduo">查看更多</div>
    </div>
    <div class="services">
      <img :src="server">
      <p class="p-one">我们的服务</p>
      <p class="p-color">激活城市和振兴文化的力量</p>
      <div class="ser-div"></div>
    </div>


    <div style="width: 100%;height: auto;background-color: #fff;padding-bottom: 6.25rem;">
      <div class="serve-item-box">
        <template v-for="(item, index) in indexArry.serve" :key="index">
          <div class="item-box">
            <div class="item-title">{{ item.serve_title }}</div>
            <div class="item-content">{{ item.serve_description }}</div>
          </div>
        </template>
      </div>
      <div class="professional-team-box">
        <div style="font-size: 4rem;color: rgba(26, 26, 26, 1);font-weight: 400;letter-spacing: .0625rem;">专业团队
        </div>
        <div style="font-size: 1.875rem;color: rgba(241, 137, 27, 1);font-weight: 300;letter-spacing: .0625rem;">
          为你量身定制方案
        </div>
        <div style="width: 10.25rem;height: .125rem;background: rgba(241, 137, 27, 1);margin-top: .625rem"></div>
      </div>
      <div class="professional-item">
        <template v-for="(item, index) in indexArry.team" :key="index">
          <div class="p-item-box">
            <img :src="imgDefultUrl + item.team_avatar">
            <div class="p-item-box-t">
              <div style="font-size: 1.8rem;font-weight: 700;letter-spacing: .0625rem;">{{ item.team_name }}</div>
              <div style="font-size: 1.25rem;font-weight: 300;letter-spacing: .125rem;">{{ item.team_type }}</div>
              <div style="display: flex;align-items: center;justify-content: space-evenly;width: 100%">
                <div style="display: flex;align-items: center;">

                  <img style="width: 1.125rem;" :src="weChat" alt="wechat">

                  <div style="margin: .3125rem;font-size: 1rem;font-weight: 400;">{{ item.team_wechat }}
                  </div>
                </div>
                <div style="display: flex;align-items: center;">
                  <img style="width: .6875rem;" :src="phone" alt="">
                  <div style="margin: .3125rem;font-size: 1rem;font-weight: 400;">{{ item.team_tel }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="buzhu-box">
        <img :src="buJu">
      </div>
    </div>


    <div class="learning">
      <div style="font-size: 4rem;font-weight: 400;">课堂学习</div>
      <div style="font-size: 1.875rem;color: #F1891BFF;font-weight: 300;letter-spacing: .0625rem;">设计知识全面了解
      </div>
      <div style="width: 10.25rem;height: .125rem;background: #F1891BFF;margin-top: 1.25rem"></div>
    </div>
    <div class="video-title">
      <div class="title-video">
        <div style="font-size: 2.25rem;font-weight: 500;">装修课堂</div>
        <div
          style="font-size: 1.5rem;color: rgba(51, 51, 51, 1);margin-top: .625rem;margin-left: 1.25rem;font-weight: 300;">
          装修知识全图了解
        </div>
      </div>
      <div class="video-box">
        <div class="video-left">
          <video id="video" ref="videoPlayer" :controls="controls" :src="classroomData.classroom_film"></video>
          <div v-if="videoIcons" class="video-play" @click="videoPlayClick">
            <img :src="videoIcon">
          </div>
        </div>
        <div class="video-right">
          <div style="font-size: 2.25rem;color: rgba(26, 26, 26, 1);font-weight: 500;">品牌咨询</div>
          <template v-for="(item, index) in indexArry.consultant" :key="index">
            <div class="right-item-box">
              <div class="left">
                <div style="color: rgba(102, 102, 102, 1); font-size: 1.5rem;font-weight: 400;">News</div>
              </div>
              <div class="item-box-xian"></div>
              <div class="right">
                <div class="time">{{ item.consultant_month }} {{ item.consultant_sun }}, {{ item.created_at }}</div>
                <div class="right-top">{{ item.consultant_company_name }}</div>
                <div class="right-bottom">{{ item.consultant_company_explain }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="quote-price">
      <div class="q-img-box">
        <img :src="deng">
      </div>
      <div class="q-from">
        <div class="q-from-item">
          <input class="q-input" type="text" placeholder="姓名">
          <img style="height: 1.125rem" :src="avata">
        </div>
        <div class="q-from-item">
          <input class="q-input" type="text" placeholder="姓名">
          <img style="height: 1.125rem" :src="youjian">
        </div>
        <div class="q-from-item">
          <input class="q-input" type="text" placeholder="姓名">
          <img style="height: 1.125rem;" :src="phone">
        </div>
        <div class="q-from-item">
          <input style="height: 12.9375rem;width: 32rem;margin-top: 9.875rem" class="q-input" type="text"
            placeholder="姓名">
          <img style="height: 1.1875rem" :src="uqur">
        </div>
      </div>


      <div class="consultation">
        <div class="right">
          <div style="font-size: 6rem;margin-left: -5rem;font-weight: 700;">获取报价</div>
          <div style="width: 12.625rem;height: .0625rem;background: rgba(250, 249, 245, 1)"></div>
          <div style="font-size: 3.0625rem;margin-left: -8.125rem;font-weight: 400;">我们将竭诚为您服务</div>
          <button class="lian-xi" @click="() => isModalVisible = true">联系咨询</button>
        </div>
      </div>
    </div>

  </div>





  <div class="caseShow" v-if="pages === 1">
    <div class="topimage">
      <img :src="imgDefultUrl + caseShowItem.case_avatar">
      <div class="topimage-title">创建激励和服务的结构</div>
    </div>
    <div class="swiper-box">
      <div class="swiper">
        <n-carousel show-arrow :autoplay="true" :interval="3000">
          <template v-for="image in caseShowItemBanner">
            <img class="carousel-img" :src="imgDefultUrl + image">
          </template>
        </n-carousel>
      </div>
      <div class="swiper-content">
        <div style="font-size: 2.5rem;font-weight: 500;">{{ caseShowItem.case_title }}</div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">面积：{{
          caseShowItem.case_total_area
        }}平方米
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">建筑面积：{{
          caseShowItem.case_building_area
        }}平方米
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">层数：{{
          caseShowItem.case_floors
        }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">房间：{{ caseShowItem.case_rooms }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">浴室：{{
          caseShowItem.case_bathrooms
        }}
        </div>
        <div style="font-size: 1.875rem;color: rgba(56, 56, 56, 1);font-weight: 300;">位置：{{
          caseShowItem.case_location
        }}
        </div>
      </div>
    </div>
    <div class="item-content-box">
      <div class="content-title">项目概述</div>
      <div class="content-hr-hr"></div>
      <div style="width: 81.5%;" v-html="caseShowItem.case_content"></div>
    </div>
    <div class="two-box-items">
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">挑战</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
      <div class="box-items-box">
        <div class="box-title">
          <div class="hengxian"></div>
          <div class="tiaozhan" style="margin-left: 1.875rem;">解决方案</div>
        </div>
        <div class="box-two">住宅和场地本身必须是设计的出发点。我们感兴趣的是一种模糊了住宅/商业设计界限的住宅。我们希望住宅是一层楼。我们对商用工程建筑材料非常感兴趣，包括混凝土浇筑或钢结构。
        </div>
        <div class="box-three">
          <div class="three-item-box">
            <img :src="success">
            <span>建造具有现代设计元素和现代主义外观的房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>在不受干扰的自然环境中建造房屋</span>
          </div>
          <div class="three-item-box">
            <img :src="success">
            <span>让房屋充满阳光</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button @click="backClick">更多案列</button>
    </div>
    <div class="bottom-add">
      <div class="add-title">我们的团队随时准备提供帮助。现在就联系我们，了解如何提供帮助。</div>
      <div class="lianxi" @click="() => isModalVisible = true">联系</div>
    </div>
  </div>


  <Modal :isVisible="isModalVisible" @close="hideBookingModal">
    <div class="prup">
      <div class="top">免费预约</div>
      <div class="p-content">
        <div class="position">
          <select class="select-item" @change="handlePositionChange">
            <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
          </select>
        </div>
        <div class="numberinput">
          <input
            style="width: 37.375rem;height: 3.9419rem;display: flex;align-items: center;padding-left: .625rem;border: .0625rem solid rgba(128, 128, 128, 1);outline: none;"
            type="text" id="modelPhoneNumber" v-model="modelPhoneNumber" placeholder="请输入您的手机号码" />
        </div>
        <div class="sub-btn-box">
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost color="rgba(241, 137, 27, 1)"
            @click="modeSubClick">
            提交
          </n-button>
          <n-button style="height: 3.9375rem;width: 11.25rem;" ghost @click="() => isModalVisible = false">
            取消
          </n-button>
        </div>
      </div>
    </div>
  </Modal>


</template>

<style lang="less" scoped>
.content {
  width: 100%;
  height: auto;
  background: #FAF9F5;
  padding-top: 7.5rem;
  overflow: hidden;

  .img {
    .carousel-img {
      width: 100%;
      height: 43.75rem;
      object-fit: cover;
    }

    .carousel-text {
      position: absolute;
      top: 11.25rem;
      left: 7.5rem;
      color: white;
      padding: .625rem;
      height: 21.75rem;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
    }

    :deep(.creative-enter-from),
    :deep(.creative-leave-to) {
      opacity: 0;
      transform: scale(0.8);
    }

    :deep(.creative-enter-active),
    :deep(.creative-leave-active) {
      transition: all 1s ease;
    }
  }

  .analyze {
    width: 100%;
    height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .ana-data-box {
      width: 97.5rem;
      height: 11.1875rem;
      background: #fff;
      margin-top: -5.625rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ana-data-box>div {
      flex: 1;
      text-align: center;
      position: relative;
    }

    .ana-data-box>div:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      height: 3.125rem;
      width: .125rem;
      background: rgba(46, 46, 46, 0.37);
      transform: translateY(-50%);
      right: 0;
    }
  }


  .add-box {
    width: 100%;
    height: 4.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .add {
      width: 97.375rem;
      height: 3.8125rem;
      background-color: rgba(241, 137, 27, 0.2);
      border-radius: 1.25rem;
      display: flex;
      align-items: center;
      color: rgba(119, 119, 119, 1);
      font-size: 1.5rem;


      .ad-icon {
        margin: 3.125rem;
        height: 100%;
        display: flex;
        align-items: center;

        img {
          width: 1.875rem;
          height: 2.125rem;
        }
      }

      .scroll-text-container {
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .scroll-text-container>div {
        display: inline-block;
        animation: marquee 20s linear infinite;
      }

      @keyframes marquee {
        0% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(-100%);
        }
      }
    }
  }

  .budget-box {
    margin-top: 2.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .budget {
      width: 97.375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .budget-img {
        width: 58.4375rem;
        height: 47.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        box-shadow: .625rem .625rem .625rem .625rem rgba(0, 0, 0, 0.1);

        img {
          width: 56.9375rem;
          height: 46.1875rem;
        }
      }

      .form-box {
        position: absolute;
        width: 52.75rem;
        margin-top: 9.375rem;
        margin-left: 44.625rem;
        display: flex;
        justify-content: space-between;

        .form-box-item {
          width: 50.3125rem;
          height: 40.75rem;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .form-item-top {
            width: 39.375rem;
            height: 5.5625rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .input-box {
            margin-top: 4.125rem;
            display: flex;
            align-items: center;
            font-size: 1.5625rem;

            .inputs {
              border: none;
              outline: none;
              border-bottom: .125rem solid rgba(153, 153, 153, 1);
            }
          }

          .btn-box {
            bottom: .625rem;
            margin-left: 18.375rem;
            padding: 1.25rem;

            .button {
              border: none;
              width: 20.6875rem;
              height: 4.4375rem;
              background: rgba(241, 137, 27, 1);
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.5625rem;
              margin: 1.25rem;
            }
          }
        }

        .form-box-right {
          width: 1.5625rem;
          height: 40.75rem;
          background: rgba(241, 137, 27, 1);
        }
      }
    }
  }

  .jin-pin-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16.125rem;

    img {
      height: 22.0625rem;
      width: 100%;
    }

    p {
      position: absolute;
      color: #fff;
      font-size: 4rem;
      font-weight: 200;
    }

    div {
      position: absolute;
      height: .125rem;
      background: rgba(241, 137, 27, 1);
      width: 10.25rem;
      margin-top: 6.625rem;
    }
  }

  .pick-it-up-box {
    margin-top: 4.1875rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .items {
      margin: 0 3.375rem;
      width: 8.5625rem;
      height: 11.0625rem;
      border: .0625rem solid rgba(0, 0, 0, 1);
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      cursor: pointer;

      &.selected {
        border-color: rgba(241, 137, 27, 1);
      }

      img {
        // width: 5.11rem;
        // height: 3.8013rem;
      }

      p {
        margin: -0.625rem;
        font-size: 1.75rem;
        color: rgba(26, 26, 26, 1)
      }
    }
  }

  .pick-swiper-box {
    margin-top: 6.875rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .swiper-box {
      width: 97.375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .carousel-slide {
        position: relative;

        .carousel-img {
          width: 100%;
          height: 43.1875rem;
          object-fit: cover;
        }

        .carousel-text {
          width: 100%;
          position: absolute;
          bottom: 3.75rem;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: white;
          font-size: 1.5rem;
          font-weight: bold;
          text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, 0.5);
        }
      }


    }

    .gengduo {
      margin-top: 8rem;
      width: 22.4375rem;
      height: 5.4375rem;
      border: .0625rem solid rgba(241, 137, 27, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.25rem;
      font-weight: 300;
      color: rgba(241, 137, 27, 1);
    }
  }

  .services {
    margin-top: 4rem;
    width: 100%;
    height: 37.4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img {
      width: 100%;
      height: 100%;
    }

    .p-one {
      margin-top: -20rem;
      position: absolute;
      color: white;
      font-size: 4rem;
      font-weight: 400;
    }

    .p-color {
      margin-top: -12.5rem;
      position: absolute;
      color: rgba(241, 137, 27, 1);
      font-size: 1.875rem;
      font-weight: 300;
    }

    .ser-div {
      margin-top: -10rem;
      position: absolute;
      width: 10.25rem;
      height: .0625rem;
      background: rgba(241, 137, 27, 1);
    }
  }

  .serve-item-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .item-box {
      position: relative;
      width: 23.0575rem;
      height: 23.3125rem;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0 .0625rem .5625rem rgba(0, 0, 0, 0.1);
      margin: -18.125rem 1.8125rem;
      overflow: hidden;

      .item-title {
        margin-top: .2144rem;
        font-size: 2.25rem;
        color: rgba(0, 0, 0, 1);
        padding: 1.5rem;
        font-weight: 400;
        letter-spacing: .125rem;
      }

      .item-content {
        width: 20rem;
        height: auto;
        /* Allow height to adjust based on content */
        margin-top: .5437rem;
        font-size: 1.375rem;
        font-weight: 300;
        color: rgba(119, 119, 119, 1);
        padding-left: 1.5rem;
        letter-spacing: .125rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        /* Limit to 4 lines */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }

      .item-learn-more {
        position: absolute;
        bottom: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: rgba(119, 119, 119, 1);
        }

        img {
          margin: .0625rem;
          width: .375rem;
          height: .75rem;
        }
      }
    }
  }

  .professional-team-box {
    margin-top: 23.625rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .professional-item {
    margin-top: 6rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .p-item-box {
      // width: 20.5rem;
      height: 29.8125rem;
      margin: 1.125rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      img {
        width: 100%;
        height: 100%;
      }

      .p-item-box-t {
        position: absolute;
        width: 16.8125rem;
        height: 11.0625rem;
        margin-top: 20.8125rem;
        clip-path: polygon(0% 18.67%, 100% 0%, 100% 100%, 0% 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #FAF9F5;
        box-shadow: 0 .625rem 1.25rem rgba(0, 0, 0, 0.2);
      }

      .p-item-box-t:hover {
        background: rgba(241, 137, 27, 1);
        cursor: pointer;
        color: white;
      }
    }
  }

  .buzhu-box {
    margin-top: 7.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 97.4375rem;
      height: 6.125rem;
    }
  }

  .learning {
    width: 100%;
    margin-top: 6.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .video-title {
    position: relative;
    margin-top: 4.4375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .title-video {
      width: 97.4375rem;
      display: flex;
      align-items: center;
    }

    .video-box {
      position: relative;
      margin-top: 4.25rem;
      width: 97.4375rem;
      display: flex;
      justify-content: space-between;


      .video-left {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        #video {
          width: 50rem;
        }

        .video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7.375rem;
          height: 7.375rem;

          img {
            width: 7.375rem;
            height: 7.375rem;
          }
        }

        .video-text-box {
          position: absolute;
          margin-left: 19.375rem;
          margin-top: -9.125rem;
          width: 27rem;
          height: 17.3125rem;
          background: rgba(250, 249, 245, 1);
          box-shadow: 0 .5rem 2.3125rem rgba(0, 0, 0, 0.11);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding: 1.875rem;

          .text-bottom {
            position: absolute;
            bottom: 3.125rem;
            display: flex;
            align-items: center;
            width: 100%;

            .item {
              width: 7.5rem;
              display: flex;
              align-items: center;
            }
          }
        }
      }

      .video-right {
        width: 42.125rem;
        height: 12.5rem;


        .right-item-box {
          margin-top: 3.6875rem;
          width: 100%;
          height: 6.375rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            width: 7.3125rem;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .item-box-xian {
            width: .0625rem;
            height: 5.875rem;
            background: rgba(0, 0, 0, 0.47);
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .right {
            width: 30.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .time {
              width: 100%;
              display: flex;
              align-items: center;
              font-size: 1.25rem;
              color: rgba(241, 137, 27, 1);
              font-weight: 400;
              letter-spacing: .0625rem;
            }

            .right-top {
              width: 30.75rem;
              font-size: 1.5rem;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              letter-spacing: .0625rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .right-bottom {
              width: 30.75rem;
              font-size: .75rem;
              font-weight: 300;
              letter-spacing: .0625rem;
              color: rgba(51, 51, 51, 1);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

  .quote-price {
    margin-top: 9.375rem;
    width: 100%;
    height: 50.5625rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: space-around;

    .q-img-box {
      width: 28.6875rem;
      height: 29.8125rem;
      display: flex;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .q-from {
      height: 35.875rem;
      width: 33rem;
      display: flex;
      // justify-content: space-around;
      flex-direction: column;
      // padding: 1.25rem;


      .q-from-item {
        margin-top: 1.3rem;
        width: 33rem;
        height: 3.5rem;
        display: flex;
        align-items: center;

        .q-input {
          height: 3.5rem;
          width: 33rem;
          border: .0625rem solid rgba(0, 0, 0, 1);
          overflow: hidden;
          font-weight: 300;
          font-size: 1.25rem;
        }

        img {
          margin-left: -2.1875rem;
        }
      }
    }

    .consultation {
      width: 29.625rem;
      height: 34.875rem;
      display: flex;
      justify-content: space-between;


      .right {
        width: 23.25rem;
        height: 34.875rem;
        background: rgba(241, 137, 27, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .lian-xi {
          width: 14.1875rem;
          height: 4.625rem;
          margin-top: 5.25rem;
          border: none;
          background: #faf9f5;
          font-size: 1.5rem;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

}

.caseShow {
  padding-top: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  // overflow: hidden;

  .topimage {
    width: 100%;
    height: 34.8125rem;
    position: relative;

    img {
      height: 100%;
      width: 100%;
    }

    .topimage-title {
      position: absolute;
      top: 60%;
      left: 20%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
      color: #fff;
      width: 45rem;
      height: 5.3125rem;
      text-decoration: underline
    }
  }

  .swiper-box {
    padding: 1.875rem 0 1.875rem 0;
    position: relative;
    margin-top: 9.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .swiper {
      right: 15.625rem;
      position: relative;
      width: 66.71rem;
      height: 44.5rem;

      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .swiper-content {
      position: absolute;
      left: 71.75rem;
      width: 37.0625rem;
      height: 32.5rem;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0 1.875rem 3.75rem -0.75rem rgba(50, 50, 93, 0.25), 0 1.125rem 2.25rem -1.125rem rgba(0, 0, 0, 0.3);
      padding: 1.875rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }

  .item-content-box {
    padding: 1.875rem 0 1.875rem 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    flex-direction: column;

    .content-title {
      width: 97.5rem;
      font-size: 2.625rem;
    }

    .content-hr-hr {
      width: 97.5rem;
      height: .0625rem;
      background-color: rgba(241, 137, 27, 1);
    }
  }

  .two-box-items {
    display: flex;
    justify-content: space-evenly;
    /* 使得两个盒子之间有空间 */
    padding-top: 3.75rem;
    width: 100%;
    height: auto;
    // margin: 0 3.375rem;
    /* 控制整体容器的左右边距 */

    .box-items-box {
      padding-left: 4.0625rem;
      width: 43.75rem;
      height: 36.75rem;
      opacity: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      background: rgba(250, 249, 245, 1);
      box-shadow: 0rem .125rem .3125rem -0.0625rem rgba(50, 50, 93, 0.25), 0rem .0625rem .1875rem -0.0625rem rgba(0, 0, 0, 0.3);

      .box-title {
        height: 2.9375rem;
        display: flex;
        align-items: center;

        .hengxian {
          width: 5.1875rem;
          height: .1875rem;
          opacity: 1;
          background: rgba(241, 137, 27, 1);
        }

        .tiaozhan {
          font-size: 2.5rem;
          font-weight: 500;
          letter-spacing: .0625rem;
          color: rgba(56, 56, 56, 1);
        }
      }

      .box-two {
        width: 42.75rem;
        height: 8.8125rem;
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: .0625rem;
      }

      .box-three {
        width: 42.75rem;
        height: 8.8125rem;
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .three-item-box {
          width: 42.75rem;
          height: 2.9375rem;
          display: flex;
          align-items: center;
          // justify-content: space-evenly;

          img {
            width: .8125rem;
            height: .8125rem;
          }

          span {
            margin-left: 2.1875rem;
            width: 35.5625rem;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: .0625rem;
          }
        }
      }


    }
  }

  .btn-box {
    margin-top: 3.375rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      border: none;
      width: 15.125rem;
      height: 4.875rem;
      opacity: 1;
      font-size: 1.875rem;
      font-weight: 300;
      background: rgba(166, 166, 166, 1);
    }

    button:hover {
      background: rgba(241, 137, 27, 1);
      color: rgba(255, 255, 255, 1);
    }
  }

  .bottom-add {
    margin-top: 6.25rem;
    width: 100%;
    height: 9.75rem;
    opacity: 1;
    background: rgba(241, 137, 27, 1);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .add-title {
      width: 69.75rem;
      height: 2.9375rem;
      font-size: 2.25rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .lianxi {
      width: 15.125rem;
      height: 4.875rem;
      border: .125rem solid rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.125rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);

    }
  }
}

.prup {
  width: 43.75rem;
  height: 25rem;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .top {
    width: 100%;
    height: 6.0625rem;
    background: rgba(56, 56, 56, 1);
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-content {
    width: 100%;
    height: 24.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    .position {
      width: 37.375rem;
      height: 3.9419rem;

      .select-item {
        width: 37.375rem;
        height: 3.9419rem;
        background-color: #fff;
      }
    }

    .numberinput {
      width: 37.375rem;
      height: 3.9419rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sub-btn-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}
</style>